<template>
  <div class="comment-reply">
    <van-cell-group>
      <van-cell>
        评论回复
        <template #right-icon>
          <van-icon name="cross" class="search-icon" @click="$emit('replyShow', false)" />
        </template>
      </van-cell>
    </van-cell-group>

    <div class="userInfo">
      <reolyItem 
        :commentList="commentList"
        @replyZangStatus="$emit('replyZangStatus')"
      />
    </div>

   <!-- 回复评论视图 -->
   <div class="replyRegion">
    <van-cell>全部回复</van-cell>
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
      :error.sync="error"
      error-text="请求失败，点击重新加载"
    >
      <van-cell v-for="(item,index) in replyList" :key="index" >
        <reolyItem 
        :commentList="item"
         />
      </van-cell>
    </van-list>
   </div>
   <div class="replyBtn">
    <van-button color="#ed3651" round="" @click="(commentShow = true)">回复评论</van-button>
   </div>

   <!-- 回复评论输入框 -->
   <van-popup v-model="commentShow" position="bottom">
     <commentPost 
       :articleId="commentList.com_id"
       @commentOnLoad="onLoad"
     /> 
   </van-popup>
</div>
</template>

<script>
import commentPost from './commentPost.vue'
import reolyItem from './children/replyItem.vue'
import {getUserComment} from '@/service/getDate'
export default {
  name: 'commentReply',
  data () {
    return {
      show: false,
      replyList: [],
      loading: false,
      finished: false,
      fabulousShow: false,
      commentShow: false,
      limit: 20, // 每页需要加载的数量
      type: 'c',
      offset: null, // 页码 传null则表示从第一页开始加载
      error: false
    }
  },
  components: {
    commentPost,
    reolyItem
  },
  props: {
    commentList: {
      type: [Object, Array],
      required: true,
    },
    // replyList: {
    //   type: [Array,Object],
    //   required: true,
    // }
  },
  // 依赖注入
  provide: function() {
    return {
      replyId: this.commentList.aut_id
    }
  },
  methods: {
    // 获取文章评论的回复数据
   async onLoad() {
      try {
      const {data} = await getUserComment({
          type:this.type,
          source: this.commentList.com_id,
          offset: this.offset,
          limit: this.limit,
        })
        console.log(data.data.results);
        this.replyList = data.data.results
        this.finished = true
        
    } catch(err) {
      console.log(err);
      this.error = true
    }
    }
  }
}
</script>

<style lang="scss" scoped>
.comment-reply {
  .replyBtn {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 10px;
      display: flex;
      justify-content: center;
      border-top: 2px solid #f5f5f5;
      border-bottom: 2px solid #f5f5f5;
      padding: 10px 0;
    .van-button {
      width: 50%;
     
    }
  }
  
  .van-cell-group {    
    .van-cell {
      position: fixed;
      top: 180px;
      left: 0;
      right: 0;
      align-items: center;
      font-size: 30px;
    }
  }
 
  .popupBox {
   /deep/ .van-popup {
      height: 20%;
      padding-top: 50px;
    }
   }
}
</style>